<template>
  <div class="container">
    <!--给导航栏设置fixed，使得固定定位-->
    <van-nav-bar fixed title="搜索结果" left-arrow @click-left="$router.back()"/>
    <!-- 瀑布流加载 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了"
              @load="onLoad">
      <van-cell v-for="item in searchList" :key="item.art_id.toString()" :title="item.title"/>
    </van-list>
  </div>
</template>

<script>
import { apiSearchList } from '@/api/search'
export default {
  name: 'search-result',
  computed: {
    q () {
      return this.$route.params.q
    }
  },
  data () {
    return {
      page: 1,
      per_page: 10,
      loading: false,
      finished: false,
      searchList: []
    }
  },
  methods: {
    async onLoad () {
      await this.$sleep(1000)
      const result = await apiSearchList({ q: this.q, page: this.page, per_page: this.per_page })
      this.loading = false
      if (!result.results.length) {
        this.finished = true
        return false
      }
      this.searchList.push(...result.results)
      this.page++
    },
    async getSearchList () {
      const result = await apiSearchList({ q: this.q })
      this.searchList = result.results
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-sizing: border-box;
  .van-list {
    flex: 1;
    margin-top: 92px;
  }
}
</style>
